<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="mainor_form">
          <div class="mainor_te">
            <!-- <el-button class="mainor_tea" @click="pldeliver"
              >批量打印</el-button
            > -->

            <el-checkbox
              style="margin-left: 15px"
              v-model="form.print_status"
              @change="sendOrder_index"
              >未打印置顶</el-checkbox
            >
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content">
                注释：未打印的订单置顶排序，权重：已发货>分拣未完成>部分分拣>未分拣
              </div>
              <svg aria-hidden="true" class="navbar_svg" width="16" height="16">
                <use xlink:href="#icon-summary_question" />
              </svg>
            </el-tooltip>
          </div>
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="配送日期" prop="send_time">
              <el-date-picker
                v-model="form.send_time"
                type="date"
                class="wid220"
                :editable="false"
                placeholder="选择配送日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
              />
            </el-form-item>
            <el-form-item label="发货状态" prop="order_status">
              <el-select
                v-model.trim="form.order_status"
                placeholder="发货状态"
                class="wid220"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(sort_status, index) in order_status"
                  :key="index"
                  :label="sort_status"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分拣状态" prop="order_list_status">
              <el-select
                v-model.trim="form.order_list_status"
                placeholder="分拣状态"
                class="wid220"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(sort_status, index) in sort_status"
                  :key="index"
                  :label="sort_status"
                  :value="parseInt(index + 1)"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="more el-form-item" @click="more">
              <span>更多</span>
              <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
            </div>
            <div class="clearfix"></div>
            <el-collapse-transition>
              <div v-if="moredata">
                <el-form-item label="配送时间" prop="send_time_id">
                  <el-select
                    v-model.trim="form.send_time_id"
                    placeholder="配送时间"
                    class="wid220"
                  >
                    <el-option label="所有" value=""></el-option>
                    <el-option
                      v-for="(send_time_list, index) in send_time_list"
                      :key="index"
                      :label="send_time_list"
                      :value="parseInt(index)"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="配送线路" prop="line_id">
                  <el-select
                    v-model.trim="form.line_id"
                    placeholder="配送线路"
                    class="wid220"
                  >
                    <el-option label="所有" value=""></el-option>
                    <el-option
                      v-for="(line, index) in lines"
                      :key="index"
                      :label="line"
                      :value="index"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="用户" prop="nickname">
                  <el-input
                    v-model.trim="form.nickname"
                    placeholder="用户"
                    clearable
                    class="wid220"
                  ></el-input>
                </el-form-item>
              </div>
            </el-collapse-transition>
            <el-form-item>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="reset"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="main_num boxdq marginTop10">
          <div class="main_num_l box">
            <p>
              订单数量：
              <em>{{ alldata.all }}</em>
            </p>
            <p>
              已发货数量：
              <em>{{ alldata.all_ed }}</em>
            </p>
            <p>
              已打印数量：
              <em>{{ alldata.all_print_over }}</em>
            </p>
            <p>
              未打印数量：
              <em>{{ alldata.all_print_no }}</em>
            </p>
          </div>
          <div class="main_num_r box">
            <el-button class="marginLeft5" @click="pldeliver"
              >批量打印
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  注释：打印机纸张需要后进纸，连续打印没有预览效果
                </div>
                <svg
                  aria-hidden="true"
                  class="navbar_svg new_navbar_svg"
                  width="14"
                  height="14"
                >
                  <use xlink:href="#icon-summary_question" />
                </svg> </el-tooltip
            ></el-button>
          </div>
        </div>
        <div class="main_table marginTop10" style="min-height: 550px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" />
            <el-table-column label="订单号" width="180" prop="order_sn" />
            <el-table-column label="用户名称" prop="company_name.nickname" />
            <!-- <el-table-column label="配送时间" prop="delivery_time">
              <template slot-scope="scope">{{
                send_time_list[scope.row.send_time_id]
              }}</template>
            </el-table-column> -->
            <el-table-column label="分拣状态" prop="status">
              <template slot-scope="scope"
                ><span :class="'order' + scope.row.order_list_status">{{
                  sort_status[scope.row.order_list_status]
                }}</span></template
              >
            </el-table-column>
            <el-table-column label="发货状态" prop="status">
              <template slot-scope="scope"
                ><span
                  :class="
                    scope.row.order_status == 2 || scope.row.order_status == 3
                      ? 'type2'
                      : 'type1'
                  "
                >
                  {{
                    scope.row.order_status == 2 || scope.row.order_status == 3
                      ? "已发货"
                      : "未发货"
                  }}</span
                ></template
              >
              <!-- {{ order_status[scope.row.order_status] }} -->
            </el-table-column>
            <el-table-column label="打印次数" prop="status">
              <template slot-scope="scope"
                ><span :class="'is_print' + scope.row.is_print"
                  >{{ scope.row.is_print == 0 ? "未打印" : "打印"
                  }}{{
                    scope.row.is_print == 0 ? "" : scope.row.print_num + "次"
                  }}</span
                ></template
              >
            </el-table-column>
            <el-table-column label="配送路线" prop="line_id">
              <template slot-scope="scope">
                {{ lineType(scope.row.line_id) }}
              </template>
            </el-table-column>
            <el-table-column
              label="管理操作"
              align="center"
              fixed="right"
              width="240"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <router-link :to="'/order/list/see/' + scope.row.id">
                  <el-link type="success">查看</el-link>
                </router-link>
                <el-link @click="print(scope.row.id, scope.row.uid)"
                  >打印</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 打印子组件 -->
    <order-print
      ref="printTemplate"
      v-show="false"
      id="printname"
    ></order-print>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { distribution_list } from "@/api/distribution/distributionList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import OrderPrint from "@/views/order/orderPrint.vue";

export default {
  computed: {
    ...mapGetters(["avatar"]),
    reverseSum() {
      return this.percent_list.reverse();
    },
    lineType() {
      return function(siteType) {
        return this.lines[siteType];
      };
    }
  },
  components: {
    OrderPrint
  },
  data() {
    return {
      low_stocks: false,
      // 时间
      parseTime,
      // 分页
      current: {
        page: 1,
        per_page: 20
      },
      limit: 20,
      totalCount: 1,
      // 更多
      moredata: false,
      // 列表数据
      list: [],

      info: {
        info: {
          order_sn: "",
          contact: "",
          mobile: "",
          address: "",
          company_name: {
            company_name: ""
          },
          order_list: []
        },
        order_status: ["未分拣"],
        status: ["未分拣"]
      },
      id: "",
      listLoading: false,
      // 搜索
      form: {
        send_time: parseTime(new Date(), "{y}-{m}-{d}"),
        send_time_id: null,
        order_list_status: "",
        order_status: "",
        nickname: "",
        print_status: this.print_status ? 1 : 0,
        line_id:null
      },
      print_status: true,
      // 全选
      selectArr: [],
      // 发货状态
      order_status: [],
      // 配送时间
      send_time_list: [],
      // 分拣状态
      sort_status: [],
      // 全部数据
      alldata: {},
      lines: {}
    };
  },
  activated() {
    // 列表
    this.sendOrder_index();
  },

  methods: {
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map(item => {
        this.selectArr.push({ id: item.id, uid: item.uid });
      });
    },
    // 监听绑定全选不可勾选
    selectInit(row, index) {
      if (row.order_status == 1 && row.order_list_status == 2) {
        return true;
      } else {
        return false;
      }
    },

    // 批量打印
    pldeliver() {
      if (this.selectArr.length != 0) {
        let length = this.selectArr.length;

        this.$confirm(
          `此操作将连续打印【${length}】张配送单,并且打印机需要设置为后进纸,是否继续?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.selectArr.map(e => {
              setTimeout(() => {
                this.$nextTick(() => {
                  this.print(e.id, e.uid, "continuous");
                });
              }, 500);
            });
          })
          .catch(() => {});
      } else {
        this.$message.error("请勾选订单");
      }
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.sendOrder_index();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.sendOrder_index();
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.sendOrder_index();
    },
    changePage(page) {
      this.current.page = page;
      this.sendOrder_index();
    },
    // 列表
    sendOrder_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      // return;
      distribution_list(data).then(res => {
        this.listLoading = false;
        if (res.errcode == 0) {
          let data = res.data;
          this.order_status = data.order_status;
          this.send_time_list = data.send_time_list;
          this.sort_status = data.sort_status;
          this.list = data.list.data;
          this.alldata = res.data;
          this.lines = data.line;
          this.totalCount = res.data.list.total;
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));

      return form;
    },
    // 打印
    print(id, uid, continuous) {
      this.$refs.printTemplate.$emit("demo", {
        id: id,
        uid: uid,
        type: "order",
        continuous: continuous
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 120px);
  }
  .main_num {
    .mainsu_te {
      position: relative;
      top: -1px;
    }
  }
}

.main_dialog {
  .main_table {
    /deep/.el-table__body-wrapper {
      overflow-y: auto;
      height: 400px;
    }
  }
  .main_xq ul li {
    width: 33.33%;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .progress_list {
    margin-top: 10px;
    p {
      height: 24px;
      line-height: 24px;
    }
    .progress_list_red {
      color: red;
    }
    .progress_list_su {
      color: #03a98e;
    }
  }
}

// 支付状态
.type1 {
  color: $order_color4;
}
.type2 {
  color: $order_color2;
}

.order0 {
  color: $order_color4;
}
.order1 {
  color: $order_color1;
}
.order2 {
  color: $order_color2;
}
.order3 {
  color: $order_color4;
}
.pldeliver_navbar_svg {
  transform: translateY(2px);
}
.new_navbar_svg {
  margin-left: 5px;
  transform: translateY(2px);
  fill: #555;
}
.is_print1 {
  color: #03a98e;
}
.is_print0 {
  color: red;
}
</style>
